<template>
  <div>
    <!-- 导航 -->
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
          <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>                        
          </button>
          <router-link to="/" class="navbar-brand">WHUT南湖博物馆</router-link>
         
          </div>
          <div class="collapse navbar-collapse" id="myNavbar">
        
          <ul class="nav navbar-nav navbar-right">
              <li><router-link to="/record">预约记录</router-link></li>
              <li v-if="islogin==true"><router-link to="/login"><span class="glyphicon glyphicon-log-in"></span> Login</router-link></li>
              <li v-if="islogin==false"><a href="#" @click="logout"><span class="glyphicon glyphicon-log-out"></span> Exit</a></li>
          </ul>
          </div>
      </div>
    </nav>

    <div class="container-fluid bg-3 text-center">    
        <!-- 当前所在环节 -->
        <div class="row">
            <div class="midd fs">填写观众信息</div>
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <!-- <img class="img-responsive" src="../assets/流程2.png" alt="流程2"> -->
                <el-steps :active="2" finish-status="success" simple style="margin-top: 20px">
                    <el-step title="选择参观日期" ></el-step>
                    <el-step title="填写观众信息" ></el-step>
                </el-steps>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="row">     
            <div class="col-sm-12"> <img class="img-responsive" src="../assets/分割线.png" alt="Chania"></div>
        </div>
        <!-- 参观日期 -->
        <div class="row">
            <h4><strong>参观日期</strong></h4>
            <div class="notetime">{{ datestr }} {{formdata.period}}</div>
        </div>
        <!-- 观众信息 -->
        <h4><strong>观众信息</strong></h4>
        <div class="row midd">
            <!-- <div class="col-sm-11"> -->
                <div class="panel panel-default">
                    <div class="panel-body midd">
                        <!-- 表单信息 -->
                        <el-form :model="formdata" :rules="rules" ref="formdata" label-width="100px" class="demo-ruleForm">
                
                            <el-form-item label="姓名" prop="name">
                            <el-input v-model="formdata.name"></el-input>
                            </el-form-item>
                 
                        
                    
                            <el-form-item label="身份证号" prop="idcard">
                            <el-input v-model="formdata.idcard"></el-input>
                            </el-form-item>
                 
                       
                            <el-form-item label="联系手机号" prop="phone">
                            <el-input v-model="formdata.phone"></el-input>
                            </el-form-item>

                            <el-form-item label="选择门票" prop="type">
                                <el-checkbox-group v-model="type">
                                    <el-checkbox label="南湖博物馆参观门票" name="type"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                     
                        <el-form-item>
                        
                        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                        </el-form-item>
                    </el-form>
                    </div>

            </div>
        </div>
        <!-- <div class="row midd">
            <div class="panel panel-default">
                <div class="panel-body midd">
                    
                    <el-form :model="formdata" :rules="rules" ref="formdata" label-width="100px" class="demo-ruleForm">
                        <div class="col-sm-6">
                            <el-form-item label="姓名" prop="name">
                            <el-input v-model="formdata.name"></el-input>
                            </el-form-item>
                        </div>
                        
                        <div class="col-sm-6">
                            <el-form-item label="身份证号" prop="idcard">
                            <el-input v-model="formdata.idcard"></el-input>
                            </el-form-item>
                        </div>
                        <div class="col-sm-6">
                            <el-form-item label="联系手机号" prop="phone">
                            <el-input v-model="formdata.phone"></el-input>
                            </el-form-item>
                        </div>
                        
                        <div class="col-sm-6">
                            <el-form-item label="选择门票" prop="type">
                                <el-checkbox-group v-model="checkedArr">
                                <el-checkbox label="南湖博物馆参观门票" name="type"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </div>
                        <el-form-item>
                        <el-button type="primary" @click="openDialog('formdata')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                    </div>

            </div>
        </div> -->

        <!-- 提交 -->
        <div class="row">
            <el-button type="primary" @click="openDialog('formdata')">确认预约</el-button>
            <!-- <button type="button" class="btn btn-danger" @click="openDialog">确认预约</button> -->
            <!-- 确认对话框 -->
            <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
                <span>请确认您的信息</span>
                <div>
                    <p>姓名：{{ formdata.name }}</p>
                    <p>身份证号：{{formdata.idcard}}</p>
                    <p>联系手机号：{{ formdata.phone }}</p>
                    <p>门票：{{type[0]}}</p>
                   
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitinfo">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 预约成功对话框 -->
            <el-dialog
                title="预约成功！"
                :visible.sync="dialogVisible2"
                width="30%"
                :before-close="handleClose">

                <div>
                    <!-- 这里的时间应该是动态的 -->
                   <p>您{{datestr}}{{ formdata.period }}的参观预约已经提交成功，请参观当日凭预约时填写的证件到馆参观。</p>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="$router.push('/')">继续预约</el-button>
                    <el-button type="primary" @click="$router.push('/record')">查看订单</el-button>
                </span>
            </el-dialog>
        </div> 
        

    
    </div><br>
    </div>
</template>

<script>
export default {
    name: 'InfoPage',
    data () {
        return {
            islogin: false,
            formdata: {
                name: '',
                phone: '',
                idcard: '',
                date: this.$route.params.date,
                period: this.$route.params.period,
            },
            type:[],
            datestr: this.$route.params.datestr,
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                 idcard: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                    { min: 6, max: 6, message: '长度为6个字符', trigger: 'blur' }
                ],
                 phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' }
                ],
                // type: [
                //     { required: true, message: '请选择门票', trigger: 'change' }
                // ],
            },
            dialogVisible: false,  //确认信息对话框
            dialogVisible2: false,  //预约成功对话框
        }
    },
    methods:{
      

        //登出
        logout(){
            localStorage.removeItem('name')
            localStorage.removeItem('uid')
            localStorage.removeItem('token')
             //清除cookie值
            document.cookie='sessionid=;'
           
           
            this.$router.push('/login')
        },

        //打开dialog
        openDialog(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.type.length==0){
                        alert("请选择门票")
                        return false
                    }
                    this.dialogVisible = true;
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
        },

        //提交预约
        submitinfo(){  
            let formData = JSON.stringify(this.formdata);
            this.$axios.post("/submit", formData)
				.then((response) => {
					if (response.data.code == "200") {
						alert(response.data.msg);
                        this.dialogVisible = false
                        this.dialogVisible2 = true
					
					} else {
						alert(response.data.msg);
                        this.dialogVisible = false
                        this.dialogVisible2 = false;
					}
				})
				.catch((err) => {
                    
                    this.dialogVisible = false
                    this.dialogVisible2 = false;
					console.log(err);
                    alert("出错");
				});
        },

        //关闭dialog
        handleClose(){
            this.dialogVisible = false
           // console.log(done)
        },



        //路由跳转
        tosuccess(){
            this.$router.push('/success')
        }
    },
    mounted(){
        //console.log(this.$route.params.date)
        //console.log(this.$route.params.period)
        //console.log(this.$route.params.datestr)

    }
}
</script>

<style>
.midd {
    margin: auto ;
    padding-left: 50px;
    padding-right: 50px;
}

.fs{
    font-size: 20px;
}

.notetime{
    font-size: 20px;
    height: 50px;
    
}
</style>